<template>
  <a-tree :load-data="onLoadData" :tree-data="treeData" />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        { title: 'Expand to load', key: '0' },
        { title: 'Expand to load', key: '1' },
        // { title: 'Tree Node', key: '2', isLeaf: true },
      ],
    };
  },
  methods: {
    
    onLoadData(treeNode) {
          console.log('/////');
          console.log(treeNode.dataRef);
          console.log('/////');

        return new Promise(resolve => {
              if (treeNode.dataRef.children) {
                resolve();
                return;
              }

              setTimeout(() => {
                treeNode.dataRef.children = [
                  { title: 'Child Node', key: `${treeNode.eventKey}-0` },
                  { title: 'Child Node', key: `${treeNode.eventKey}-1` },
                ];
                this.treeData = [...this.treeData];

                 console.log('aaaa');
                 console.log(this.treeData);
                 console.log('aaaa');

                resolve();
              }, 1000);


        });
    },


  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
